<div class="alert alert-info">
  <ul>
    <li>位置左/右分别代表主页左/右的两个大图片，需要上传图片。</li>
    <li>位置中代表首页的视频，需要上传视频，并添加视频类型。</li>
    <li>位置广告代表首页的广告，需要上传广告图片，并添加广告链接。</li>
    <li>广告链接格式必须为http://www.brp.ch/fr/accueil.html</li>
  </ul>
</div>
<%= simple_form_for [:admin, @doing], :defaults => { :input_html => { :class => "form-control" } }, html: { multipart: true, class: 'form-horizontal' } do |f| %>  
  <%= f.input :position, collection: Doing.positions, label: "位置" %>  
  <%= f.input :name, label: "名称" %> 
  <%= f.input :cover, :input_html => { :class => "btn btn-default" }, label: "图片", hint: "图片大小必须小于1M, 左右焦点图宽高比为421x480，视频图片410x470，广告图片1290x480"  %>  
  <%= f.input :video, label: "视频"  %>  
  <%#= f.input :video_type, collection: Doing.video_types, label: "视频类型"  %> 
  <%= f.input :src, label: "链接"  %>
  <%= f.input :x, label: '黑框水平位置(px)', placeholder: '0' %>
  <%= f.input :y, label: '黑框垂直位置(px)', placeholder: '0' %>
  <%= f.input :width, label: '黑框宽度(px)', placeholder: '250' %>
  <%= f.input :height, label: '黑框高度(px)', placeholder: '100'%>
  <%= f.hidden_field :persistent_id %>
  <%= f.button :wrapped, value: "commit" %>  
<% end %>

              
<div class="col-md-12">
      <a class="btn btn-default btn-lg" id="add_video" href="#template">增加视频</a>
    </div>
</div>

<div style="display:none" id="success" class="col-md-12">
    <div class="alert-success">
            队列全部文件处理完毕
        </div>
    </div>
    <div class="col-md-12">
        <table id="up_table" class="table table-striped table-hover text-left" style="margin-top:40px;display:none">
            <thead>
                <tr>
                    <th class="col-md-4">
                        Filename
                    </th>
                    <th class="col-md-2">
                        Size
                    </th>
                    <th class="col-md-6">
                        Detail
                    </th>
                </tr>
            </thead>
            <tbody id="fsUploadProgress"></tbody>
        </table>
    </div><div class="col-md-12">
</div>
<%= javascript_include_tag "file_upload/qiniu_control" %>
<script type="text/javascript">
  $(function() {

    function display_banner() {
      $('div.doing_video').hide();
      $('div.doing_video_type').hide();

    }

    function display_advertise() {
      $('div.doing_video').hide();
      $('div.doing_video_type').hide();
    }

    function display_video() {
      $('div.doing_video').show();
      $('div.doing_video_type').show();
    }

    function display_flash() {
      $('div.doing_video').show();
      $('div.doing_video_type').hide();
    }

    $("#doing_position").change(function() {
      switch(this.value)
      {
      case "左":
        display_banner();
        break;
      case "右":
        display_banner();
        break;
      case "广告":
        display_advertise();
        break;
      case "视频":
        display_video();
        break;
      case "flash":
        display_video();
        break;
      default:
        display_video();
      }
    });

    <% case @doing.position %>
    <% when "左","右" %>
      display_banner();
    <% when "广告" %>
      display_advertise();
    <% when "视频" %>
      display_video();
    <% when "flash" %>
      display_flash();
    <% end %>

    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'add_video',       //上传选择的点选按钮，**必需**
        uptoken_url: '/token',
            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        // uptoken : '<Your upload token>',
            //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        unique_names: true,
            // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
        // save_key: true,
            // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
        domain: 'http://luke.qiniudn.com/',
            //bucket 域名，下载资源时用到，**必需**
        // container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '200mb',           //最大文件体积限制
        flash_swf_url: '<%= asset_path('file_upload/Moxie.swf') %>',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        // drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function(up, files) {
                $('#up_table').show();
                $('#success').hide();
                plupload.each(files, function(file) {
                    var progress = new FileProgress(file, 'fsUploadProgress');
                    progress.setStatus("等待...");
                });
            },
            'BeforeUpload': function(up, file) {
                var progress = new FileProgress(file, 'fsUploadProgress');
                var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                if (up.runtime === 'html5' && chunk_size) {
                    progress.setChunkProgess(chunk_size);
                }
            },
            'UploadProgress': function(up, file) {
                var progress = new FileProgress(file, 'fsUploadProgress');
                var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                progress.setProgress(file.percent + "%", up.total.bytesPerSec, chunk_size);
            },
            'FileUploaded': function(up, file, info) {
                   // 每个文件上传成功后,处理相关的事情
                   // 其中 info 是文件上传成功后，服务端返回的json，形式如
                   // {
                   //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                   //    "key": "gogopher.jpg"
                   //  }
                   // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                   var progress = new FileProgress(file, 'fsUploadProgress');
                   progress.setComplete(up, info);
                   var domain = up.getOption('domain');
                   var res = JSON.parse(info);
                   var sourceLink = domain + res.key;// 获取上传成功后的文件的Url
                   console.log(sourceLink);
                   $('#doing_video').val(sourceLink);
                   console.log(res.persistent_id);
                   $("#doing_persistent_id") = res.persistent_id;
            },
            'Error': function(up, err, errTip) {
                  $('#up_table').show();
                  var progress = new FileProgress(err.file, 'fsUploadProgress');
                  progress.setError();
                  progress.setStatus(errTip);
            },
            'UploadComplete': function() {
                   $('#success').show();
                   //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                var key = "";
                // do something with key here
                return key
            }
        }
    });
    // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
    // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs

    uploader.bind('FileUploaded', function() {
    console.log('hello man,a file is uploaded');
});


  });
</script>
